<template>
  <div class="styplgraphy">
    <div class="bread">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '#' }">书法欣赏</el-breadcrumb-item>
        <el-breadcrumb-item>书法赛事</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="calligraphy-list">
      <div
        class="calligraphy-item" v-for="(item, index) in itemList" :key="index"
      >
        <img
          :src="item.cover"
          :alt="item.title"
          class="calligraphy-image"
        >
        <router-link :to="{name:'CompetitionDetai', query: {id:item.id}}" target="_blank">
          <div class="calligraphy-content">
            <h2 class="calligraphy-title">{{ item.title }}</h2>
            <p class="calligraphy-dynasty"> {{ item.link }}</p>
            <p class="calligraphy-description">{{ item.introduction }}</p>
          </div>
        </router-link>
      </div>
    </div>

    <div class="page">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>

import { listCompetition } from '@/api/appreciate/competition/competition'
import ImageNonePreview from '@/components/ImagePreview/ImageNonePreview.vue'
import { cutString } from '@/utils/ruoyi'

export default {
  name: 'Rubbing',
  components: { ImageNonePreview },
  data() {
    return {
      total: 0,
      itemList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 6,
        grade: '0'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    cutString,
    getList() {
      this.loading = true
      listCompetition(this.queryParams).then(response => {
        this.itemList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    reQuery() {
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>

.styplgraphy {


}


.calligraphy-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 20px;
}

.calligraphy-item {
  display: flex;
  background: rgba(255, 253, 245, 0.9);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #e8dfca;
}

.calligraphy-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.calligraphy-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-right: 1px solid #e8dfca;
}

.calligraphy-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.calligraphy-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #5c3d1e;
  margin-bottom: 10px;
  position: relative;
  font-family: "STKaiti", "华文楷体", "楷体", serif;
  display: inline-block;
}

.calligraphy-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 50px;
  height: 2px;

  background: #8b4513;
}

.calligraphy-dynasty {
  font-size: 1rem;
  color: #a0522d;
  margin-bottom: 10px;
  font-style: italic;
  font-family: "STKaiti", "华文楷体", "楷体", serif;
}

.calligraphy-description {
  font-size: 1rem;
  color: #7a5c3c;
  line-height: 1.6;
  font-family: "STKaiti", "华文楷体", "楷体", serif;
}


.page {
  text-align: center;
  margin-top: 30px;

  ::v-deep .number.active {
    background-color: #337ab7 !important;
  }

  ::v-deep .pagination-container {
    background-color: #f5f1e6;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d4c4a8' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
  }
}
</style>
